<template>
  <l-layout class="l-tab-page" v-show="!lr_loadPage">
    <l-panel style="padding: 0; height:100%">
      <el-tree :data="fileTreeData" :load="loadFile" lazy :props="defaultProps" highlight-current :indent="8"
        node-key="id">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span @click="handleNodeClick(data)">
            <i v-if="data.type == 'Dir' " class="el-icon-folder" style="color: #2abb82;font-size: 15px;"></i>
            <i v-else :class="lr_getFileIcon(data.name).icon"
              :style="{color: lr_getFileIcon(data.name).color,'font-size': '15px'}"></i>
            {{data.name.length + node.level > 19? data.name.substr(0, 17-node.level) + '...': data.name }}
          </span>
          <i v-if="data.type == 'File'" class="el-icon-download" style="color:#0a51c9;font-size: 17px;"
            @click="handleDown(data)"></i>
        </span>
      </el-tree>
    </l-panel>

    <!--文件预览-->
    <l-fullscreen-dialog :showOk="false" :visible.sync="fileVisible">
      <template #title>
        <div>
          <div v-if="fileData" class="learun-list-item-wraper">
            <div class="learun-list-item-icon">
              <i :class="lr_getFileIcon(fileData.name).icon" :style="{color: lr_getFileIcon(fileData.name).color}"></i>
            </div>
            <div class="learun-list-item-content">
              <div class="learun-list-item-title" style="color: rgba(0,0,0,.85);">
                {{fileData.name}}
              </div>
            </div>
          </div>
        </div>
      </template>
      <file-form ref="fileForm" :file="fileData">
      </file-form>
    </l-fullscreen-dialog>

  </l-layout>
</template>
<script>
import FileForm from './fileForm.vue'

export default {
  components: {
    FileForm,
  },
  props: {
    projectId: {//项目id
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tableData: [],
      fileVisible: false, // 文件预览
      fileData: null,
      businessCode: '',//业务对应字典表中的id
      parentId: "",
      fileTreeData: [],//文件树数据数据
      defaultProps: {
        children: 'business',
        label: 'name',
        isLeaf: 'leaf'
      },
    }
  },
  computed: {
  },
  mounted() {
    // this.getProjectStage(this.projectId)
  },
  methods: {
    handleNodeClick(data) {
      if (data.type == 'File') {
        this.fileData = data
        this.fileVisible = true
      }
    },

    loadFile(node, resolve) {
      this.businessFile(node, resolve)

      // this.projectFile(node, resolve)

    },
    // 项目的电子档案
    async projectFile(node, resolve) {
      this.businessCode = node.data.businessCode;
      if (node.data.businessId && node.level == 1) {
        // 一级菜单 周期名称
        const data = node.data.business.filter(item => {
          return item.businessId
        })
        resolve(data)
      } else if (node.data.businessId && node.level == 2) {
        // 二级菜单 业务名称
        const data = await this.loadTableData(node.data.businessId);
        resolve(data)
      } else if (node.level >= 3) {
        // 三级以上 各业务档案文件
        if (node.data.type == 1) {
          // 三级以上 文件夹
          const data = await this.loadTableData(node.data.id);
          resolve(data)
        } else {
          // 三级以上 文件
          resolve([node.data])
        }
      }
      else {
        return resolve([])
      }
    },

    //业务的电子档案
    async businessFile(node, resolve) {
      this.businessCode = node.data.businessCode;
      if (node.data.businessId && node.data.type == 'Dir') {
        // 文件夹
        const data = await this.loadTableData(node.data.id);
        resolve(data)
      } else if (node.data.businessId && node.data.type == 'File') {
        // 文件
        resolve([])
      }
      else {
        return resolve([])
      }
    },

    handleDown(row) {
      if (row.fileid) {
        this.$downFile(
          `${this.apiUrl}system/annexesfile/${row.id}?token=${this.token}`
        )
      }
    },


    /**
     * 获取文件列表
     * projectId:项目id
     * businessId:业务id
     * parentId:文件夹id（取对应的业务id，文件夹id）
     */
    async loadTableData(parentId) {
      if (parentId) {
        this.parentId = parentId
      }
      const queryData = {
        parentId: this.parentId,//当前文件夹id
        configBusinessId: this.businessCode, // 业务表名
        projectId: this.projectId, // 当前项目id
      }
      const api = window.$crud('businness/project/archives/schema');
      let data = await this.$awaitWraper(api.getInfo(queryData))
      if (data) {
        data.forEach(element => {
          if (element.type == "File") {
            element.leaf = true
          }
          element.businessCode = element.configBusinessid
        });
        return data || []
      }
    },


    // 获取文件树数据
    async init(data) {
      this.businessCode = data.businessCode
      this.fileTreeData = await this.loadTableData(data.businessId)
    },



  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog.is-fullscreen.l-fullscreen-dialog {
  // 文件预览窗口大小
  width: 49%;
  height: 96%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.custom-tree-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.el-tree-node__content {
  white-space: normal;
  height: auto !important;
}
</style>